import React, { useRef, Component } from 'react';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Tag, Modal, Menu, Dropdown, Image,message } from 'antd';
import ProTable from '@ant-design/pro-table';
import request from 'umi-request';
import { getUsers, saveCertification } from '@/api/index';

export default class Users extends Component {
  state = {
    visible: false,
    currentImg: '',
    currentUserID: '',
    imgShow: false,
  };

  handleResult(result) {
    let params = {
      userID: this.state.currentUserID,
      judge: result,
    };
    this.setState({ visible: false });
    saveCertification(params).then(res=>{
      if(res.code===200){
        message.success('认证成功')
      }
    })
  }
  render() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        valueType: 'indexBorder',
        width: 48,
      },
      {
        title: '用户ID',
        dataIndex: 'userID',
      },
      {
        title: '昵称',
        dataIndex: 'nickname',
        copyable: true,
        ellipsis: true,
      },
      {
        title: '班级',
        dataIndex: 'Class',
        ellipsis: true,
      },
      {
        title: '性别',
        dataIndex: 'sex',
        ellipsis: true,
        width: 48,
      },
      {
        title: '状态',
        dataIndex: 'certified',
        filters: true,
        onFilter: true,
        valueType: 'select',
        render: (_, record) => {
          if (record.certified === 'true') {
            return <Tag color="red">认证通过</Tag>;
          } else {
            return <Tag color="blue">未认证</Tag>;
          }
        },
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        valueType: 'dateTime',
        sorter: true,
        hideInSearch: true,
        render: (_, record) => {
          return <a>{new Date(parseInt(record.create_time)).toLocaleString()}</a>;
        },
      },
      {
        title: '操作',
        valueType: 'option',
        render: (text, record, _, action) => {
          if (record.certified === 'true') {
            return (
              <a
                onClick={() => {
                  this.setState({
                    imgShow: true,
                    currentImg: record.certifyImg,
                    currentUserID: record.userID,
                  });
                }}
              >
                查看
              </a>
            );
          } else {
            if (record.certifyImg != null) {
              return (
                <a
                  onClick={() => {
                    this.setState({
                      visible: true,
                      currentImg: record.certifyImg,
                      currentUserID: record.userID,
                    });
                  }}
                >
                  认证
                </a>
              );
            } else {
              return <a>还未上传</a>;
            }
          }
        },
      },
    ];
    const menu = (
      <Menu>
        <Menu.Item key="1">1st item</Menu.Item>
        <Menu.Item key="2">2nd item</Menu.Item>
        <Menu.Item key="3">3rd item</Menu.Item>
      </Menu>
    );
    return (
      <div>
        <ProTable
          columns={columns}
          request={async () => {
            const msg = await getUsers();
            return {
              data: msg.data,
              success: true,
              total: 10,
            };
          }}
          editable={{
            type: 'multiple',
          }}
          columnsState={{
            persistenceKey: 'pro-table-singe-demos',
            persistenceType: 'localStorage',
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
          }}
          form={{
            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return Object.assign(Object.assign({}, values), {
                  created_at: [values.startTime, values.endTime],
                });
              }
              return values;
            },
          }}
          pagination={{
            pageSize: 5,
          }}
          dateFormatter="string"
          headerTitle="用户列表"
          toolBarRender={() => [
            <Button key="button" icon={<PlusOutlined />} type="primary">
              新建
            </Button>,
            <Dropdown key="menu" overlay={menu}>
              <Button>
                <EllipsisOutlined />
              </Button>
            </Dropdown>,
          ]}
        />
        <Modal
          title="认证"
          visible={this.state.visible}
          onCancel={() => {
            this.setState({ visible: false });
          }}
          footer={[
            <Button key="back" onClick={() => this.handleResult('reject')}>
              不通过
            </Button>,
            <Button key="submit" type="primary" onClick={() => this.handleResult('pass')}>
              通过
            </Button>,
          ]}
        >
          <Image src={this.state.currentImg} height={300} />
        </Modal>

        <Modal
          title="查看照片"
          visible={this.state.imgShow}
          onCancel={() => {
            this.setState({ imgShow: false });
          }}
          footer={null}
        >
          <Image src={this.state.currentImg} height={300} />
        </Modal>
      </div>
    );
  }
}
